import React from 'react';
import { inject, observer } from 'mobx-react';
import { Modal, message, Button, Spin } from "antd";

import { WeaLocaleProvider, WeaTop, WeaRightMenu, WeaAlertPage,WeaTab} from 'ecCom';
import { WeaTableNew } from "comsMobx";
import {InfoFeedbackDialog} from '../../components/dialog/InfoFeedbackDialog';
import {Condition,getAdButtons} from '../list/listCondition';
import {Text} from '../util/text';
const text = new Text();
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@inject("infoFeedbackStore")
@observer
class InfoFeedback extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        }
    }

    componentDidMount() {
        const {infoFeedbackStore} = this.props;
        infoFeedbackStore.getInfoFeedbackList();
    }
    componentWillReceiveProps(nextProps) {
        const {infoFeedbackStore} = this.props;
        if (this.props.location.key !== nextProps.location.key) {
            infoFeedbackStore.getInfoFeedbackList();
        }
    }

    reRenderColumns(columns) {
        const {infoFeedbackStore} = this.props;
        columns.forEach(c => {
            if (c.dataIndex == 'title') {
                c.render = (text, record, index) => {
                    let valueSpan = record[c.dataIndex];
                    return <span dangerouslySetInnerHTML={{ __html: valueSpan }} style={{ cursor: "pointer" }} onClick={(v) => this.onChange(v, text, record, index) }></span>
                }
            } else {
                c.render = function (text, record) {
                    let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
                    return <span dangerouslySetInnerHTML={{ __html: valueSpan }}></span>
                }
            }
        })
        return columns;
    }

    onChange = (n, text, record, index) => {
        const { infoFeedbackStore, infoFeedbackStore: {feedbackDialogStore}} = this.props;
        feedbackDialogStore.initFeedbackForm({ feedbackId: record.id, type: 'show',typeNum: 2 });
    }

    render() {
        const { infoFeedbackStore, infoFeedbackStore: {feedbackDialogStore}} = this.props;
        const {loadingSpin, isRight, tableStore} = infoFeedbackStore;
        const {searchForm, searchCondition, showSearchAd} = infoFeedbackStore;
        const formParams = searchForm.getFormParams() || {};
        if (loadingSpin) {
            return <div className="h100" style={{ textAlign: 'center', paddingTop: '300px' }}><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@g7hhsf`} size="large"/></div>
        }
        if (!isRight) {
            return <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@da6fom`}><div>{getLabel(382663, '暂无权限') }</div></WeaAlertPage>
        }
        return (
            <div className="wea-docback-dummycategory">
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@kgwebz`}
                    title={text.FEEDBACKINFO}
                    icon={<i className='icon-coms-government' />}
                    iconBgcolor='#f14a2d'
                    >
                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@9otavy`}
                        buttonsAd={getAdButtons(infoFeedbackStore) }
                        searchType={['base', 'advanced']}
                        searchsBaseValue={formParams.title}
                        setShowSearchAd={bool => { infoFeedbackStore.setShowSearchAd(bool) } }
                        hideSearchAd={() => infoFeedbackStore.setShowSearchAd(false) }
                        searchsAd={
                            <div><Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@6ubip4`} listStore={infoFeedbackStore} form={searchForm} condition={searchCondition} onEnterSearch={()=>{infoFeedbackStore.doSearch();infoFeedbackStore.setShowSearchAd(false);}}></Condition></div>
                        }
                        showSearchAd={showSearchAd}
                        onSearch={v => { infoFeedbackStore.doSearch() } }
                        onSearchChange={v => {
                            if (infoFeedbackStore.searchForm.has("title")) {
                                infoFeedbackStore.appendFormFields({ title: { value: v } })
                            } else {
                                infoFeedbackStore.searchForm.add(v, { key: "title" })
                            }
                        } }/>
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ylscf6`} comsWeaTableStore={tableStore}
                        getColumns={c => this.reRenderColumns(c) }
                        className="wea-info-table"
                        needScroll={true}
                        />
                    <InfoFeedbackDialog ecId={`${this && this.props && this.props.ecId || ''}_InfoFeedbackDialog@qzrnux`} store={feedbackDialogStore} type="0"/>
                </WeaTop>
            </div>
        )
    }



}

export default InfoFeedback;